﻿{% extends 'cms/base.html' %}
{% block title %}
    首页
{% endblock %}
{% block page_header %}
    概况
{% endblock %}
{% block head %}
{#    <style>#}
{#    改变背景颜色  本人觉得加上这段代码比较好看，，没有类似补丁的感觉#}
{#        .panel {#}
{#            background-color: inherit;#}
{#        }#}
{#    </style>#}
   <script src="{{ url_for('static', filename='cms/assets/js/echarts.min.js') }}"></script>
{% endblock %}
{% block content %}

<div class="row">
    <div class="col-xs-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body easypiechart-panel">
                <div id="studentBoyGirlPercentage" style="width: 250px;height: 200px"> </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body easypiechart-panel">
                <div id="teacherMaleFemalePercentage" style="width: 250px;height: 200px"> </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body easypiechart-panel">
                <div id="SbirthdayCount" style="width: 250px;height: 200px"> </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body easypiechart-panel">
                 <div id="TbirthdayCount" style="width: 250px;height: 200px"> </div>
            </div>
        </div>
    </div>
</div><!--/.row-->
<div class="row">
    <div class="col-xs-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body easypiechart-panel">
                 <div id="TdepartCount" style="width: 250px;height: 200px"> </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body easypiechart-panel">
                 <div id="TprofCount" style="width: 250px;height: 200px"> </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body easypiechart-panel">
                 <div id="TprofCount" style="width: 250px;height: 200px;">
                     <div style="line-height: 180px">广告招商：）</div>
                 </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body easypiechart-panel">
                 <div id="TprofCount" style="width: 250px;height: 200px;">
                     <div style="line-height: 180px">广告招商：）</div>
                 </div>
            </div>
        </div>
    </div>
</div>

<!-- /. ROW  -->

{% endblock %}
{% block js %}
    <script type="text/javascript">
        option = {
            title:{
                text: '学生男女比例',
                textStyle:{
                    align: 'center',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
                {
                    name:'学生男女比例',
                    type:'pie',
                    selectedMode: 'single',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            position: 'inner'
                        },
                        emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                    }
                }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:{{ Smale_num|safe }}, name:'男', selected:true, itemStyle:{color:'#37A2DA'}},
                        {value:{{ Sfemale_num|safe }}, name:'女', itemStyle:{color:'#E062AE'}}
                    ]
                }

            ]
        };
         //初始化echarts实例
        var myChart = echarts.init(document.getElementById('studentBoyGirlPercentage'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        option = {
            title:{
                text: '教师男女比例',
                textStyle:{
                    align: 'center',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
                {
                    name:'教师男女比例',
                    type:'pie',
                    selectedMode: 'single',
                    radius: ['40', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            position: 'inner'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                    }
                }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:{{ TmaleNum|safe }}, name:'男', selected:true, itemStyle:{color:'#37A2DA'}},
                        {value:{{ TfemaleNum|safe }}, name:'女', itemStyle:{color:'#E062AE'}}
                    ]
                }

            ]
        };
         //初始化echarts实例
        var myChart = echarts.init(document.getElementById('teacherMaleFemalePercentage'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'学生出生年份分布',
                textStyle:{
                    fontWeight: 'normal'
                }
            },
{#            鼠标放在图片上显示出十字坐标#}
            tooltip: {
                trigger: 'item'
            },

            legend:{
                data:['年份']
            },
            xAxis:{
                type:'category',
                data:{{ SbirthCountYearList|safe }}
            },
            series:[{
                name:'人数',
                type:'bar',
                barWidth: 20,
                data:{{ SbirthCountNumList|safe }},
                itemStyle: {
                        color: "#f09b22"
                }
            }],
            yAxis:{
                type:'value',
{#                不显示坐标的网格#}
                splitLine: {
                    show: false
                }
            }
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('SbirthdayCount'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'教师出生年份分布',
                textStyle:{
                    fontWeight: 'normal'
                }
            },
{#            鼠标放在图片上显示出十字坐标#}
            tooltip: {
                trigger: 'item'
            },

            legend:{
                data:['年份']
            },
            xAxis:{
                type:'category',
                data:{{ TbirthCountYearList|safe }}
            },
            series:[{
                name:'人数',
                type:'bar',
                barWidth: 20,
                data:{{ TbirthCountNumList|safe }},
                itemStyle: {
                        color: "#f09b22"
                }
            }],
            yAxis:{
                type:'value',
{#                不显示坐标的网格#}
                splitLine: {
                    show: false
                }
            }
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('TbirthdayCount'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'部门教师分布',
                textStyle:{
                    fontWeight: 'normal'
                }
            },
{#            鼠标放在图片上显示出十字坐标#}
            tooltip: {
                trigger: 'item'
            },

            legend:{
                data:['部门']
            },
            xAxis:{
                type:'category',
                data:{{ TdepartNameList|safe }}
            },
            series:[{
                name:'人数',
                type:'bar',
                barWidth: 20,
                data:{{ TdepartNumList|safe }},
                itemStyle: {
                        color: "#f09b22"
                }
            }],
            yAxis:{
                type:'value',
{#                不显示坐标的网格#}
                splitLine: {
                    show: false
                }
            }
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('TdepartCount'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'教师职称分布',
                textStyle:{
                    fontWeight: 'normal'
                }
            },
{#            鼠标放在图片上显示出十字坐标#}
            tooltip: {
                trigger: 'item'
            },

            legend:{
                data:['职称']
            },
            xAxis:{
                type:'category',
                data:{{ TprofNameList|safe }}
            },
            series:[{
                name:'人数',
                type:'bar',
                barWidth: 20,
                data:{{ TprofNumList|safe }},
                itemStyle: {
                        color: "#f09b22"
                }
            }],
            yAxis:{
                type:'value',
{#                不显示坐标的网格#}
                splitLine: {
                    show: false
                }
            }
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('TprofCount'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
{% endblock %}